<!DOCTYPE html>
<html lang="en">

<head>
    <title>SDT no set</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="SDT.min.js" type="text/javascript" defer="defer" charset="utf-8"></script>
    <script src="noSetScript.js" type="text/javascript" defer="defer" charset="utf-8"></script>
    <link href="css/noSetStyle.css" rel="stylesheet">
</head>

<body>
    <div style="display: none;">
        <svg>
            <symbol id="Icon1" viewBox="0 0 36 9">
                <rect width="36" height="9" style="fill:rgb(0,0,255);" />
            </symbol>
            <symbol id="Icon2" viewBox="0 0 36 9">
                <rect width="36" height="9" style="fill:rgb(255,0,255);" />
            </symbol>
            <symbol id="Icon3" viewBox="0 0 36 9">
                <rect width="36" height="9" style="fill:rgb(0,0,0);" />
            </symbol>
        </svg>
    </div>
    <main>
        <div class="left">
            <h1 class="title">示例</h1>
            <h2 class="title2">不进行设置</h2>
            <div class="sdt-drag-element-lis">
                <div class="sdt-drag-element" data-sdt-type="test1">
                    <svg width="72" height="36">
                <use xlink:href="#Icon1" x="0" y="8"></use>
                <text x="0" y="14" style="font-size: 18px; font-weight: 600;">test1</text>
            </svg>
                </div>
                <div class="sdt-drag-element" data-sdt-type="test2">
                    <svg width="72" height="36">
                <use xlink:href="#Icon2" x="0" y="8"></use>
                <text x="0" y="14" style="font-size: 18px; font-weight: 600;">test2</text>
            </svg>
                </div>
                <div class="sdt-drag-element" data-sdt-type="test3">
                    <svg width="72" height="36">
                <use xlink:href="#Icon3" x="0" y="8"></use>
                <text x="0" y="14" style="font-size: 18px; font-weight: 600;">test3</text>
            </svg>
                </div>
            </div>
        </div>
        <div class="cent">
            <div class="sdt-canvas" style="width: 720px; height: 720px; border:1px solid #ccc">
                <svg id="sdtDropCanvas" width="100%" height="100%">
				</svg>
            </div>
        </div>
        <div class="right">
            <ul>
                <li>
                    <h4>bug: Safari 请拖图标动文字部分</h4>
                </li>
                <li>
                    <h4>树的中心点位于左上角</h4>
                </li>
                <li>
                    <h4>任何元素可以放置在任何元素上</h4>
                </li>
                <li>
                    <h4>树朝向右边展开</h4>
                </li>
                <li>
                    <h4>连线颜色为#999</h4>
                </li>
                <li>
                    <h4>连线方式为贝塞尔曲线</h4>
                </li>
                <li>
                    <h4>元素间的上下边距为元素的高度</h4>
                </li>
                <li>
                    <h4>按下鼠标拖动画布移动</h4>
                </li>
                <li>
                    <h4>滚动滚轮 放大 \ 缩小</h4>
                </li>
            </ul>
            <a class="back" href="https://github.com/aute/SVGDragTree">回到项目主页</a>
        </div>
    </main>

</body>

</html>